<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-04-09 19:00:52
 * @LastEditors: Ansel
 * @LastEditTime: 2020-04-23 20:09:01
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <style>
        #chart1,
        #chart2 {
            width: 1000px;
            height: 800px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="chart1"></div>
    <script>
        var myCharts = echarts.init(document.getElementById("chart1"));
        myCharts.setOption({
            legend: {
                data: ['昨日销量', '今日销量', '明日销量']
            },
            // grid:{
            //     show:true,
            //     left:"20%",
            //     width:"50%",
            //     containLabel:false,
            //     backgroundColor:"grey",
            //     borderColor:"#000"
            // },

            xAxis: [
                {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "衬衫", "羊毛衫", "雪纺衫"],
                },
                {
                    data: ["衬衫1", "羊毛衫1", "雪纺衫1", "衬衫1", "羊毛衫1", "雪纺衫1"],
                },
                {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "衬衫", "羊毛衫", "雪纺衫"],
                    offset:-100
                }
            ],
            // xAxis: {
            //     //    show:false,
            //     show: true,
            //     gridIndex: 0,
            //     position: 'bottom',
            //     // min:5,
            //     // max:25
            //     // min:'dataMin',
            //     // max:'dataMax'
            //     // min:function(value){
            //     //     // console.log(value);
            //     //     return value.min;
            //     // },
            //     // max:function(value){
            //     //     // console.log(value);
            //     //     return value.max;
            //     // }
            //     //    offset:-100,

            //     type: "category",
            //     data:["衬衫","羊毛衫","雪纺衫","衬衫","羊毛衫",{
            //         value:"雪纺衫",
            //         textStyle:{
            //             fontSize:16
            //         }
            //     }],
            //     //如果x轴类型是category，min、max代表索引
            //     // min:1,
            //     // max:3
            //     name:"种类",
            //     // nameLocation:"end"
            //     nameGap:20,
            //     nameRotate:45,
            //     // inverse:true
            //     // boundaryGap:false, //["20%","20%"]有问题
            //     // scale:false,
            //     // splitNumber:10,
            //     // minInterval:10,
            //     // maxInterval:20,
            //     // interval:10

            //     //坐标轴轴线相关设置
            //     axisLine:{
            //         show:true,
            //         onZero:false,
            //         symbol:['none','arrow'],
            //         symbolSize:[10,25],//[宽度，高度]
            //         symbolOffset:[0,20],
            //         lineStyle:{
            //             color:"red" 
            //         }
            //     },
            //     //坐标轴刻度设置
            //     axisTick:{
            //         // show:true,
            //         // interval:1,
            //         // inside:true,
            //         // length:10
            //     },

            //     //坐标轴刻度相关配置
            //     axisLabel:{
            //         show:true,
            //         interval:0, 
            //         inside:false,
            //         rotate:45,
            //         margin:18,
            //         // formatter:'${value}  好',
            //         formatter:function(value,index){
            //             console.log(value,index);
            //             return value + " " + index;
            //         },
            //     },

            //     //分割线的设置
            //     splitLine:{
            //         show:true,
            //         interval:1,
            //         lineStyle:{
            //             color:"#000"
            //         }
            //     },

            //     //分割区域的设置
            //     splitArea:{
            //         show:true
            //     },

            // },
            yAxis: {

            },
            series: [
                // {
                //     type:'bar',
                //     data:[5,10,15,20,25,30]
                // }
                { //系列列表
                    name: "昨日销量",
                    type: 'bar', //图表的类型
                    data: [5, 20, 36, 10, 19, 14] //图表的数据
                },
                { //系列列表
                    name: "今日销量",
                    type: 'bar', //图表的类型
                    data: [5, 20, 36, 10, 19, 14] //图表的数据
                },
                { //系列列表
                    name: "明日销量",
                    type: 'bar', //图表的类型
                    data: [5, 20, 36, 10, 19, 14] //图表的数据
                },
            ]
        });
    </script>
</body>

</html>